<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../js/hpFrame.js"></script>
    <script src="../../js/hpComponent.js"></script>
    <style>
        .replylist {
            display: flex;
            flex-direction: column;
        }

        .replyitem {
            display: flex;
            flex-direction: row;
            min-height: 150px;
            width: 100%;
            border: 1px solid grey
        }

        .reply {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100px;
            margin-right: 10px;
            border-right: 1px solid grey
        }

        .replycontent {
            display: flex;
            flex-direction: column;
        }

        .replyusername {
            padding: 10px;
        }

        .replyhtml {
            display: flex;
            align-items: center;
            height: 100px;
        }

        .replytitle {
            font-size: 12px;
            font-weight: bold;
            color: grey;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="pageContainer">
            <div class="formContainer">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="帖子主题" :label-width="formLabelWidth" prop="title">
                                <div v-html="form.title"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="帖子内容" :label-width="formLabelWidth" prop="content">
                                <div v-html="form.content"></div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="附件" :label-width="formLabelWidth">
                                <common-upload :groupguid="form.id" readonly="true"></common-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="回复列表" :label-width="formLabelWidth">
                                <div class="replylist">
                                    <div class="replyitem" v-for="replyrow in tableData" :key="replyrow.id">
                                        <div class="reply">
                                            <span class="replyusername">{{replyrow.createByName}}</span>
                                            <el-button v-if="local_userId==replyrow.createBy || local_userType==99" type="primary" @click="deletereply(replyrow)" size="mini"
                                                style="margin-top: 5px">删除回复</el-button>
                                        </div>
                                        <div class="replycontent">
                                            <div class="replyhtml">
                                                <span class="replytitle">回复内容：</span><span>{{replyrow.content}}</span>
                                            </div>
                                            <div>
                                                <common-upload :groupguid="replyrow.id" readonly="true"></common-upload>
                                            </div>
                                            <div>
                                                <span
                                                    class="replytitle">回复时间：</span><span>{{replyrow.createTime}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="回复内容" :label-width="formLabelWidth">
                                <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="replayform.content">
                                </el-input>
                                <common-upload :groupguid="replayform.id" style="margin-top:10px"></common-upload>
                                <el-button type="primary" @click="addreply" style="margin-top:10px">添加回复</el-button>
                            </el-form-item>

                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="divEditButtons">
            <el-button @click="close">关 闭</el-button>
        </div>
    </div>

</body>
<script>
    var detailUrl = apiFrameUrl + "subject/getSubjectInfo";
    var tableUrl = apiFrameUrl + "subjectreply/getSubjectReplyList";
    var addUrl = apiFrameUrl + "subjectreply/save";
    var deleteUrl = apiFrameUrl + "subjectreply/removeById";
    var pageData = {
        tableData: [],
        replayform: {
            id: getNewGuid(),
            content: '',
            subjectId: getUrlParam('id'),
            createBy: localStorage.getItem("local_userId"),
            createByName: localStorage.getItem("local_userName"),
            createTime: '',
        },
        //表单数据
        form: {
            id: getUrlParam('id')
        },
        //样式
        formLabelWidth: '120px',
        //验证规则
        rules: {
            title: [{
                required: true,
                message: '请输入帖子主题',
                trigger: 'blur'
            }],
            content: [{
                required: true,
                message: '请输入帖子内容',
                trigger: 'blur'
            }],
        },
        local_userId:localStorage.getItem("local_userId"),
        local_userType:localStorage.getItem("local_userType")
    }

    var app = new Vue({
        el: '#app',
        data: pageData,
        methods: {
            //取消
            close() {
                CloseDialog(null, 'subjectdetail');
            },
            loadDetail() {
                var param = {
                    id: getUrlParam('id')
                };
                JsonAjax(JSON.stringify(param), detailUrl, function (data, status) {
                    if (data.success) {
                        Vue.set(pageData, "form", data.result);
                    }

                })
            },
            addreply: function () {
                pageData.replayform.createTime = getDatetime();
                JsonAjax(JSON.stringify(pageData.replayform), addUrl, function (data,
                    status) {
                    if (data.success) {
                        OpenSuccess('提示', '添加成功', function () {
                            bindGrid();
                            pageData.replayform.id = getNewGuid();
                            pageData.replayform.content = "";
                        })
                    } else {
                        OpenFail('提示', '添加失败')
                    }
                })
            },
            deletereply: function (row) {
                OpenConfirm('提示', '确认删除？', function () {
                    JsonAjax(JSON.stringify(row), deleteUrl, function (data, status) {
                        if (data.success) {
                            OpenSuccess('提示', '删除成功')
                            bindGrid();
                        }
                    })
                })
            }
        },
        mounted() {
            checkUserInfo();
            this.loadDetail();
            bindGrid();
        },
    })

    function bindGrid() {
        var data = {
            "pageNo": 1,
            "pageSize": 9999,
            "subjectId": getUrlParam('id')
        };
        JsonAjax(JSON.stringify(data), tableUrl, function (data, status) {
            if (data.success) {
                Vue.set(pageData, "tableData", data.result.records);
            }
        })
    }
</script>

</html>